<template>
	<view class="daixie" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar title="代谢水平"></nav-bar>
		<view class="m-container">
			<view class="r-card">
				<view style="padding: 0 46rpx">
					<view class="date-box">
						<view class="pre-p" @click="reduceTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
								size="23"
							></u-icon>
						</view>
						<view class="date-m" @click="showCalendar = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<view class="next-p" @click="plusTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
								size="23"
							></u-icon>
						</view>
					</view>
					<view class="new-tabs">
						<view
							class="new-tab"
							@click="changeType(item.type)"
							:class="{ current: currentType == item.type }"
							v-for="(item, index) in tabs"
							:key="index"
							>{{ item.text }}</view
						>
					</view>
				</view>
				<view class="t-box">
					<view class="t-title">
						<view>代谢水平详情</view>
						<view class="t-btn" @click="showModal = true">
							{{ tagTypeText }}
							<u-icon
								color="#1f2434"
								name="arrow-down"
								size="15"
							></u-icon>
						</view>
					</view>
					<view class="t-tips" v-if="tagType != 0">
						{{ tipsData.gradeExplain || ' ' }}
					</view>
					
				</view>
				<view class="progress-box" v-if="tagType == 0">
					<view class="con">
						<view class="l">
							<view class="text"
								>{{
									metabolismDetail.measureCount || 0
								}}天</view
							>
							<view class="text2">测量天数</view>
						</view>
						<view class="c">
							<u-line-progress
								:percentage="
									metabolismDetail.measureCountPercent 
								"
								height="7"
								activeColor="#23C89E"
								inactiveColor="#E1E1E1"
								:showText="false"
							></u-line-progress>
						</view>
						<view class="r">
							{{
								metabolismDetail.measureCountPercent
									| toFixed
							}}%</view
						>
					</view>
					<view class="con">
						<view class="l">
							<view class="text"
								>{{
									metabolismDetail.behaviorCount || 0
								}}天</view
							>
							<view class="text2">记录行为</view>
						</view>
						<view class="c">
							<u-line-progress
								:percentage="
									metabolismDetail.behaviorCountPercent 
								"
								height="7"
								activeColor="#23C89E"
								inactiveColor="#E1E1E1"
								:showText="false"
							></u-line-progress>
						</view>
						<view class="r">
							{{
								metabolismDetail.behaviorCountPercent
									| toFixed
							}}%</view
						>
					</view>
				</view>
				<view class="my-charts" v-if="tagType == 0">
                    <view class="t-tips2">{{ currentType == 2?'本周代谢弹性分数':'本周代谢弹性趋势' }}  </view>
					<myCharts :option="todayMetabolismOption"></myCharts>
				</view>
				<view v-else>
                    <view v-if="piePicData.rerMaxKey">
                        <view class="content">
                            <view class="charts">
                                <myCharts
                                    :option="pieOption"
                                    @chartClick="chartClick"
                                ></myCharts>
                            </view>
                            <view class="charts-text">
                                <view class="text-item"
                                    >次数:<text>{{
                                        piePicData.count || 0
                                    }}</text></view
                                >
                                <view class="text-item"
                                    >达标次数:<text>{{
                                        piePicData.reachCount || 0
                                    }}</text></view
                                >
                                <view class="text-item"
                                    >频率:<text
                                        >{{
                                            frequency || 0
                                        }}%</text
                                    ></view
                                >
                                <view class="text-item"
                                    >达标频率:<text
                                        >{{ piePicData.reachFrequency || 0 }}%</text
                                    ></view
                                >
                            </view>
                        </view>
                        <view class="b-tips" v-if="tipsData.consequence">
                            <view class="title"> 智能提醒 </view>
                            <view class="text">
                                Tips：{{ tipsData.consequence || '' }}
                                <br />
                                {{ tipsData.suggest || '' }}
                            </view>
                        </view>
                    </view>
                    <view v-else style="padding-top: 170rpx;">
                        <u-empty
						text="暂无数据"
                        width="54"
                        height="54"
                        textSize="12"
						icon="http://oss.antaimedical.com/images/pro/2025/03/67d931b8e4b0d615350f315d4e8O2MSrFJ2ae78d945bacfe324df54cef40f90b690c.png"
					    >
					</u-empty>
                    </view>
				</view>
			</view>
		</view>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate"
			:minDate="minDate"
			:show="showCalendar"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar = false"
		></my-calendar>
		<myPicker
			:show="showModal"
			:columns="pickerColumns"
			@close="showModal = false"
			keyName="label"
			closeOnClickOverlay
			@cancel="showModal = false"
			@confirm="handleConfirm"
		></myPicker>
	</view>
</template>

<script>
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
import myCharts from '@/components/charts/myCharts.vue'
import myPicker from '@/components/myPicker/myPicker.vue'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import {
	findMeasureRecord,
	findCh0RateRecord30,
	findPiePic,
	findMetabolismRecord,
	findMetabolismDetail,
	findMetabolismGradeExplain
} from '@/api/index.js'
import { getItemColor, getWeekDate } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCharts,
		myCalendar,
		myPicker
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			currentType: 2,
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			currentSearchTime: undefined, // 当前查询的时间
			tabs: [
				{
					type: 2,
					text: '周'
				},
				{
					type: 3,
					text: '月'
				}
			],
			showCalendar: false, // 日历控件显示
			showModal: false,
			pickerColumns: [
				[
					{ value: '0', label: '全部' },
					{ value: '1', label: '清晨测量' },
					{ value: '2', label: '运动前' },
					{ value: '3', label: '运动后' },
					{ value: '6', label: '禁食后' },
					{ value: '7', label: '睡前' },
					{ value: '100', label: '早餐前' },
					{ value: '101', label: '早餐后' },
					{ value: '102', label: '午餐前' },
					{ value: '103', label: '午餐后' },
					{ value: '104', label: '晚餐前' },
					{ value: '105', label: '晚餐后' }
				]
			],
			daysList: [], // 某一天数据
			todayMetabolismOption: {},
			chartType: '--',
			levelColor: {
				1: '#54DE97',
				2: '#54A2DE',
				3: '#AE81F3',
				4: '#DEB354',
				5: '#EC8F59'
			},
			tagType: 0,
			tagTypeText: '全部',
			colorList: [
				'rgba(31, 36, 52, .09)',
				'rgba(31, 36, 52, .1)',
				'rgba(31, 36, 52, .13)',
				'rgba(31, 36, 52, .16)',
				'rgba(31, 36, 52, .19)',
				'rgba(31, 36, 52, .22)'
			],
			frequency: 0,
			piePicData: {},
			pieOption: {
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['25%', '90%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'inside',
							color: '#1F2434'
						},
						labelLine: {
							show: false
						},
						data: []
					}
				]
			},
			metabolismDetail: {},
			tipsData: {}
		}
	},
	filters: {
		getTag(data) {
			if (data == 1) {
				return '清晨'
			} else if (data == 2) {
				return '运动前'
			} else if (data == 3) {
				return '运动后'
			} else if (data == 4) {
				return '餐前'
			} else if (data == 5) {
				return '餐后'
			} else if (data == 7) {
				return '睡前'
			}
		},
		toFixed(val) {
			return (val && val.toFixed()) || 0
		}
	},
	onShow() {
		this.fetchData()
		let params = {
			page: 1,
			size: 100,
			time: dayjs().format('YYYY-MM-DD'),
			userId: this.userId
		}
		findMeasureRecord(params)
			.then((res) => {
				this.daysList = res.data.list
			})
			.catch((err) => {})
	},
	onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = getWeekDate(this.maxDate)
		this.defaultDate[0] = this.maxDate
	},
	methods: {
		// 选择tag标签
		handleConfirm(v) {
			this.tagType = v.value[0].value
			this.tagTypeText = v.value[0].label
			this.showModal = false
			this.fetchData()
		},
		// 获取提示语
		findMetabolismGradeExplain(rerLevel) {
			let params = {
				rerLevel,
				tag: this.tagType
			}
			findMetabolismGradeExplain(params).then((res) => {
				this.tipsData = res.data
			})
		},
		// 点击饼图
		chartClick(params) {
			if (!params.name) return
			let optionData = []
			for (
				let index = 0;
				index < this.piePicData.pieArr.length;
				index++
			) {
				let pieItem = this.piePicData.pieArr[index]
				let obj = {}
				if (params.name == '等级' + pieItem.rerLevel) {
					this.frequency = pieItem.frequency
					obj = {
						value: pieItem.count,
						name: '等级' + pieItem.rerLevel,
						rerLevel: pieItem.rerLevel,
						itemStyle: {
							color: '#23C89E'
						}
					}
				} else {
					obj = {
						value: pieItem.count,
						name: '等级' + pieItem.rerLevel,
						rerLevel: pieItem.rerLevel,
						itemStyle: {
							color: this.colorList[pieItem.rerLevel]
						}
					}
				}
				optionData.push(obj)
			}
			this.pieOption.graphic = {
				show: false,
				elements: [
					{
						type: 'circle', // 创建一个圆形
						left: 'center', // 定位到中心
						top: 'center',
						z: '10',
						shape: {
							cx: 0, // 圆心x坐标（相对于容器）
							cy: 0, // 圆心y坐标（相对于容器）
							r: 37 // 半径，根据你的内圆大小调整
						},
						style: {
							fill: '#FFF', // 填充颜色设为透明，以便看到下面的饼图
							stroke: 'rgba(255,255,255,.1)', // 描边颜色，即阴影颜色
							lineWidth: 5, // 描边宽度，即阴影的模糊程度
							shadowBlur: 20, // 阴影的模糊大小
							shadowColor: 'rgba(0,0,0,.2)' // 阴影颜
						}
					},
					{
						type: 'text',
						left: 'center',
						top: '55%',
						z: '11',
						style: {
							text: '理想等级',
							textAlign: 'center',
							fill: '#92949c',
							fontSize: 12,
							fontWeight: 400
						}
					},
					{
						type: 'text',
						left: 'center',
						top: '45%',
						z: '11',
						style: {
							text: `${this.piePicData.idealRer}`,
							textAlign: 'center',
							fill: '#1F2434',
							fontSize: 15,
							fontWeight: 500
						}
					}
				]
			}
			this.pieOption.series[0].data = optionData
			this.findMetabolismGradeExplain(params.data.rerLevel)
		},
		// 饼图数据
		findPiePic() {
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				dateTime: dayjs(this.defaultDate[0]).format('YYYY-MM-DD'),
				dateType: obj[this.currentType] || 'W',
				tag: this.tagType,
				userId: this.userId
			}
			this.tipsData = {}
			findPiePic(params).then((res) => {
				this.piePicData = res.data
				let optionData = []
				let pieArr = []
				for (let index = 0; index < 5; index++) {
					let i = index + 1
					if (this.piePicData['rerLevel' + i]) {
						pieArr.push(this.piePicData['rerLevel' + i])
					}
				}
				this.piePicData.pieArr = pieArr
				if (!res.data.rerMaxKey) {
					this.pieOption.series[0].data = []
					this.pieOption.showChart = true
					this.pieOption.graphic = {
						elements: []
					}
                    this.frequency = 0
				} else {
					for (
						let index = 0;
						index < this.piePicData.pieArr.length;
						index++
					) {
						let pieItem = this.piePicData.pieArr[index]
						let obj = {}
						if (
							this.piePicData.rerMaxKey ==
							'rerLevel' + pieItem.rerLevel
						) {
							this.frequency = pieItem.frequency
							obj = {
								value: pieItem.count,
								name: '等级' + pieItem.rerLevel,
								rerLevel: pieItem.rerLevel,
								itemStyle: {
									color: '#23C89E'
								}
							}
							this.findMetabolismGradeExplain(pieItem.rerLevel)
						} else {
							obj = {
								value: pieItem.count,
								name: '等级' + pieItem.rerLevel,
								rerLevel: pieItem.rerLevel,
								itemStyle: {
									color: this.colorList[pieItem.rerLevel]
								}
							}
						}
						optionData.push(obj)
						this.pieOption.graphic = {
							show: false,
							elements: [
								{
									type: 'circle', // 创建一个圆形
									left: 'center', // 定位到中心
									top: 'center',
									z: '10',
									shape: {
										cx: 0, // 圆心x坐标（相对于容器）
										cy: 0, // 圆心y坐标（相对于容器）
										r: 37 // 半径，根据你的内圆大小调整
									},
									style: {
										fill: '#FFF', // 填充颜色设为透明，以便看到下面的饼图
										stroke: 'rgba(255,255,255,.1)', // 描边颜色，即阴影颜色
										lineWidth: 5, // 描边宽度，即阴影的模糊程度
										shadowBlur: 20, // 阴影的模糊大小
										shadowColor: 'rgba(0,0,0,.2)' // 阴影颜
									}
								},
								{
									type: 'text', //使用graphic来调节标题的样式以及位置
									left: 'center',
									top: '55%',
									z: '11',
									style: {
										text: '理想等级',
										textAlign: 'center',
										fill: '#92949c',
										fontSize: 12,
										fontWeight: 400
									}
								},
								{
									type: 'text', //使用graphic来调节标题的样式以及位置
									left: 'center',
									top: '45%',
									z: '11',
									style: {
										text: `${this.piePicData.idealRer}`,
										textAlign: 'center',
										fill: '#1F2434',
										fontSize: 15,
										fontWeight: 500
									}
								}
							]
						}
					}
					this.pieOption.series[0].data = optionData
					this.pieOption.showChart = false
				}
			})
		},
		// 查询数据
		async fetchData() {
			console.log('查询')
			uni.showLoading({
				title: '加载中...'
			})
			if (this.tagType == 0) {
				this.findMetabolismRecord()
			} else {
				this.findPiePic()
			}
			uni.hideLoading()
		},
		findMetabolismRecord() {
			let obj = {
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				dateType: obj[this.currentType] || 'W',
				dateTime: this.defaultDate[0],
				userId: this.userId
			}
			findMetabolismDetail(params).then((res) => {
				this.metabolismDetail = res.data
			})
			findMetabolismRecord(params).then((res) => {
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 1,
									end: 50,
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									maxValueSpan: 3600 * 24 * 1000 * 7,
									zoomLock: true
							  },
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: val.mbScore || 0,
						rerData: {
							tag: val.tag,
							label: val.label
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					return dayjs(val.createTime).format('MM/DD')
				})
				if (!res.data.length) {
					let dayArr = []
					for (let index = 0; index < 7; index++) {
						let day = dayjs(this.defaultDate[0])
							.subtract(7 - index, 'day')
							.format('MM/DD')
						dayArr.push(day)
					}
					option.xAxis.data = dayArr
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				this.todayMetabolismOption = option
			})
		},
		// 选择日期
		selectDate(e) {
			console.log(e)
			this.defaultDate[0] = e[0]
			if (this.currentType == 1) {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentType == 2) {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentType == 3) {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchData()
			this.showCalendar = false
		},
		// 上一个选项
		reduceTap() {
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		plusTap() {
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 更改显示状态tabs状态栏
		changeType(type) {
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
			}
			this.fetchData()
		},

		getTagLabel(type) {
			if (type == 1) {
				return '清晨测量'
			} else if (type == 2) {
				return '运动前'
			} else if (type == 3) {
				return '运动后'
			} else if (type == 6) {
				return '禁食后'
			} else if (type == 7) {
				return '睡前'
			} else if (type == 8) {
				return '自定义测量'
			} else if (type == 9) {
				return '第0天测量'
			} else if (type == 10) {
				return '呼气采集'
			} else if (type == 11) {
				return '吸气采集 '
			}
		},
		getOtherTagLabel(type) {
			if (type == 1) {
				return '早餐前'
			} else if (type == 2) {
				return '午餐前'
			} else if (type == 3) {
				return '晚餐前'
			} else if (type == 4) {
				return '早餐后'
			} else if (type == 5) {
				return '午餐后'
			} else if (type == 6) {
				return '晚餐后'
			} else if (type == 7) {
				return '零食前'
			} else if (type == 8) {
				return '零食后'
			}
		},

		goRemark(info) {
			uni.navigateTo({
				url: `/pagesA/health/analyse/remark/index?id=${
					info.id
				}&rerLevel=${info.rerLevel}&type=${info.type}&measureTime=${
					info.measureTime
				}&content=${info.remark ? info.remark : ''}`
			})
		},
		goRecord() {
			uni.navigateTo({
				url: '/pagesA/health/analyse/record/index'
			})
		},
		getBgColor(data) {
			return getItemColor(data)
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #fff;
	min-height: 100%;

	.u-popup__content {
		border-top-left-radius: 128rpx;
	}

	.u-popup__content__close {
		top: 48rpx !important;
		right: 48rpx !important;

		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}
}
</style>
<style lang="scss" scoped>
.daixie {
	background-color: #fff;
	padding: 0 0 48rpx;
	.m-container {
		background-color: #fff;
	}
	.new-tabs {
		width: 100%;
		height: 66rpx;
		margin: 26rpx 0 80rpx 0;
		display: flex;
		align-items: center;
		background: #f3f4f7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.new-tab {
			width: 49%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(31, 36, 52, 0.5);
			line-height: 38rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-right: 2rpx solid #d0d0d0;
			&:last-child {
				border-right: 0;
			}
		}
		.current {
			font-weight: 600;
			font-size: 26rpx;
			color: #1f2434;
		}
	}
	.date-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 26rpx 0;
		.date-m {
			min-width: 240rpx;
			padding: 0 28rpx 0 32rpx;
			margin: 0 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: rgba(31, 36, 52, 0.5);
			text-align: center;
		}
	}
	.m-container {
		margin-top: 48rpx;
	}
	.r-card {
		border-radius: 0;
		padding: 0;
		padding-bottom: 20rpx;
		.my-charts {
            .t-tips2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(31, 36, 52, 0.35);
				text-align: left;
				margin-bottom: 8rpx;
			}
			height: 468rpx;
			margin: 0 30rpx;
		}
		.t-box {
			padding: 0 30rpx;
			margin-bottom: 38rpx;
			.t-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #1f2434;
				.t-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #1f2434;
					padding: 8rpx 16rpx;
					background-color: #f3f4f7;
					border-radius: 8rpx;
				}
			}
			.t-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.8);
				text-align: left;
				margin-top: 30rpx;
			}
		}
	}
	.content {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.charts {
			width: 370rpx;
			height: 370rpx;
		}
		.charts-text {
			.text-item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.8);
				text-align: left;
				margin-bottom: 28rpx;
				text {
					margin-left: 10rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #1f2434;
					text-align: left;
				}
			}
		}
	}
	.b-tips {
		padding: 50rpx 30rpx;
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #1f2434;
			text-align: left;
			margin-bottom: 10rpx;
		}
		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(31, 36, 52, 0.85);
			text-align: left;
			line-height: 48rpx;
		}
	}
	.progress-box {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		.con {
			background: #f3f4f7;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			text-align: left;
			margin-bottom: 20rpx;
			.l {
				.text2 {
					font-weight: 400;
					font-size: 22rpx;
					color: #9ba2b9;
					text-align: left;
				}
			}
			.c {
				width: 416rpx;
			}
		}
	}
}
</style>
